<template>
  <PageContainer>
    <view class="container">
      <Header title="人脉广场" :isBoxShadow="false" background="#f2f3f5">
        <template #customTitle>
          <view class="custom-title">
            <view>
              <TImage
                :src="myUserInfo?.avatar"
                width="64rpx"
                height="64rpx"
                border="2rpx solid rgba(255, 255, 255, 0.60)"
                borderRadius="50%"
                error-img-type="person"
                mode="aspectFill"
              />
            </view>
            <view class="user-info">
              <view class="name-box">
                <text class="name">{{ myUserInfo?.name || '未填写' }}</text>
                <text
                  class="ant-iconfont icon-edit"
                  style="font-size: 32rpx; color: #969799; padding: 4rpx"
                  @click="handleEditUserInfo"
                ></text>
              </view>
              <view class="progress">资料完善度{{ myUserInfo?.dataValueRate }}%</view>
            </view>
            <text class="home" @click="toUserHomePage">我的主页</text>
          </view>
        </template>
        <UserListScrollView
          ref="userListScrollViewRef"
          :activityId="activityId"
          :myUserInfo="myUserInfo"
          :maxLength="maxLength"
          @data="handleData"
        ></UserListScrollView>
      </Header>
      <swiper
        class="swiper"
        :circular="false"
        :current="current"
        :indicator-dots="false"
        :duration="600"
        :autoplay="false"
        @change="handleSwiperChange"
      >
        <swiper-item v-for="item in userList" :key="item.id" :skip-hidden-item-layout="true">
          <UserInfoDetail :currentUser="item"></UserInfoDetail>
        </swiper-item>
      </swiper>

      <PerfectInfoDialog></PerfectInfoDialog>
      <TButtonGroup>
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 32rpx;
            width: 100%;
          "
        >
          <TButton
            icon="&#xeaf2;"
            :customStyle="{
              borderRadius: '50%',
              width: '112rpx',
              height: '112rpx',
              background: '#E29942',
              lineHeight: '112rpx',
              color: '#FFFFFF',
            }"
            :isOpenDebounce="false"
            @click="handleNextUser"
          />
          <TButton
            v-if="currentUser?.self"
            text="完善资料"
            :customStyle="{
              borderRadius: '44rpx',
              background: '#2878FF',
              color: '#FFFFFF',
              width: '558rpx',
              height: '80rpx',
              lineHeight: '80rpx',
            }"
            @click="handleEditUserInfo"
          />
        </view>
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* connectionSquare 人脉广场 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import UserListScrollView from './Components/UserListScrollView.vue';
  import { navigateTo, onLoad } from '@/router';
  import { computed, nextTick, ref } from 'vue';
  import type { RegisterIdAppUserInfo } from '@/api/activity/types';
  import UserInfoDetail from './Components/UserInfoDetail.vue';
  import { selectUserPerfectInfoProgress } from '@/api';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import PerfectInfoDialog from '@/components/PerfectInfoDialog/index.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';

  const activityId = ref();
  const useUser = useUserStoreWithOut();

  onLoad<'connectionSquare'>(async (op) => {
    uni.showLoading({ title: '加载中' });
    activityId.value = op.activityId || op.scene;
    useUser.validatePerfectionInfo();
    queryUserPerfectInfoProgress();
  });

  const userList = ref<RegisterIdAppUserInfo[]>([]);
  const currentUser = ref<RegisterIdAppUserInfo>();
  const maxLength = ref(11);
  const current = ref(0);
  // 接收完成数据和当前原始下标
  const handleData = (data: RegisterIdAppUserInfo[], index: number) => {
    uni.hideLoading();
    userList.value = data;
    currentUser.value = data[index];
    current.value = index;
  };

  const myUserInfo = ref<RegisterIdAppUserInfo>();

  const queryUserPerfectInfoProgress = async () => {
    myUserInfo.value = await selectUserPerfectInfoProgress();
    userList.value.forEach((item, index) => {
      if (item.appUserInfoId === myUserInfo.value?.appUserInfoId) {
        userList.value[index] = myUserInfo.value;
      }
    });
  };
  const userListScrollViewRef = ref<InstanceType<typeof UserListScrollView>>();

  // 点击x或者点击右滑
  const handleNextUser = () => {
    userListScrollViewRef.value?.handleNextUser();
  };

  // 监听swiper切换
  const handleSwiperChange = (event: { detail: { current: number } }) => {
    userListScrollViewRef.value?.handleClick(userList.value[event.detail.current]);
  };

  const handleEditUserInfo = () => {
    navigateTo({
      name: 'myProfile',
      options: {
        success: () => {
          queryUserPerfectInfoProgress();
        },
      },
    });
  };

  const toUserHomePage = () => {
    navigateTo({
      name: 'userHomePage',
      options: {
        id: myUserInfo.value?.appUserInfoId,
        success: () => {
          queryUserPerfectInfoProgress();
        },
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    background-color: #f2f3f5;
    .custom-title {
      padding-left: 88rpx;
      display: flex;
      align-items: center;
      gap: 8rpx;

      .user-info {
        display: flex;
        flex-direction: column;

        .name-box {
          line-height: 40rpx;
          display: flex;
          align-items: center;

          .name {
            font-size: 28rpx;
            color: #333;
          }
        }

        .progress {
          line-height: 40rpx;
          font-size: 24rpx;
          color: #969799;
        }
      }

      .home {
        border-radius: 24rpx;
        border: 2rpx solid #2878ff;
        padding: 8rpx 16rpx;
        margin-left: 16rpx;
        color: #2878ff;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .swiper {
      min-height: 150vh;
    }
  }
</style>
